<template>
    <div>
        <!--内容-->
        <main role="main">

            <div class="header-nav">
                <div class="clearfix">
                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                <a id="categoryAll" v-on:click="onClickAll()" href="javascript:;"
                                   class="cur">全部</a>
                                <a v-bind:id="'category-' + o.id" v-for="o in level1" v-on:click="onClickLevel1(o)"
                                   href="javascript:;">{{o.name}}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="skill clearfix">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <a id="categoryNot" @click="onClickNot()" href="javascript:;"
                               class="on">不限</a>
                            <a v-bind:id="'category-' + o.id" v-for="o in tempLevel2" v-on:click="onClickLevel2(o.id)"
                               href="javascript:;">{{o.name}}</a>
                            <div style="clear:both"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="album py-5 bg-light">
                <div class="container">
                    <Course v-bind:courses="courses"></Course>
                    <h3 v-show="courses.length === 0" class="text-center text-muted">课程还未上架</h3>
                    <div class="row">
                        <div  class="col-md-12">
                            <Pagination ref="pagination" v-bind:list="listCourses"></Pagination>
                        </div>
                    </div>
                </div>
            </div>

        </main>
    </div>
</template>

<script>
    import Course from "../components/Course";
    import Pagination from "../components/Pagination";

    export default {
        name: "index",
        components: {
            Course, Pagination
        },
        data: function () {
            return {
                courses: [],
                level1: [],
                level2: [],
                tempLevel2: [],
                clickCategoryId:"",
                curLevel1Obj:{}
            }
        },
        mounted() {
            let _this = this;
            _this.listCourses();
            _this.allCategory();
        },
        created() {

        },
        watch:{
            clickCategoryId: function () {
                // alert(this.clickCategoryId)
                //分类id变化的时候查询课程
                this.listCourses();
				
            }
        },
        methods: {
            /*点击不限按钮*/
            onClickNot() {
                let _this = this;
                _this.clickCategoryId = _this.curLevel1Obj.id;
                $("#categoryNot").siblings("a").removeClass("on");
                $("#categoryNot").addClass("on");
            },
            /*点击全部*/
            onClickAll() {
                let _this = this;
                _this.tempLevel2 = _this.level2;
                _this.clickCategoryId = "";
                _this.curLevel1Obj = {};
                $("#categoryAll").siblings("a").removeClass("cur");
                $("#categoryAll").addClass("cur");
                $("#categoryNot").siblings("a").removeClass("on");
                $("#categoryNot").addClass("on");
            },
            /*点击二级菜单*/
            onClickLevel2(categoryId) {
                let _this = this;
                _this.clickCategoryId = categoryId;
                $("#category-" + categoryId).siblings("a").removeClass("on");
                $("#category-" + categoryId).addClass("on");
            },
            /*点击一级菜单*/
            onClickLevel1(category) {
                let _this = this;
                _this.curLevel1Obj = category;
                _this.tempLevel2 = category.children;
                _this.clickCategoryId = category.id;
                // 点击一级分类时，显示激活状态
                $("#category-" + _this.clickCategoryId).siblings("a").removeClass("cur");
                $("#category-" + _this.clickCategoryId).addClass("cur");
                // 点击一级分类时，二级分类【无限】按钮要设置激活状态
                $("#categoryNot").siblings("a").removeClass("on");
                $("#categoryNot").addClass("on");
            },
            /*查询所有分类*/
            allCategory() {
                let _this = this;
                _this.$ajax.get(process.env.VUE_APP_SERVER + '/coding/web/category/all').then((response) => {
                    if (response.data.success) {
                        _this.level1 = response.data.data.all;
                        _this.level2 = response.data.data.level2;
                        _this.tempLevel2 = response.data.data.level2;
                    }
                })
            },

            /*查找课程*/
            listCourses(page=1) {
                let _this = this;
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/coding/web/course/list', {
                    page: page,
                    size: _this.$refs.pagination.size,
                    categoryId:_this.clickCategoryId
                }).then((response) => {
                    if (response.data.success) {
                        _this.courses = response.data.data.list;
                        _this.$refs.pagination.render(page, response.data.data.total);
                    }

                })
            }
        }
    }
</script>
<style>
    /* 头部 一级分类 */
    .header-nav {
        height: auto;
        background: #fff;
        box-shadow: 0 8px 16px 0 rgba(28, 31, 33, .1);
        padding: 16px 0;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
        /*background-color: #d6e9c6;*/
    }

    .header-nav > div {
        width: 100%;
        padding-left: 12px;
        box-sizing: border-box;
        margin-left: auto;
        margin-right: auto;
        /*background-color: #B4D5AC;*/
    }

    .header-nav a {
        float: left;
        font-size: 16px;
        color: #07111b;
        line-height: 50px;
        height: 45px;
        position: relative;
        margin-right: 46px;
        font-weight: 700;
    }

    .header-nav a:hover {
        color: #c80;
    }

    .header-nav a.cur {
        color: #c80;
    }

    .header-nav a.cur:before {
        display: block;
    }

    .header-nav a:before {
        display: none;
        content: ' ';
        position: absolute;
        bottom: 0;
        background: #c80;
        width: 16px;
        height: 3px;
        left: 50%;
        margin-left: -8px;
    }

    /* 二级分类 */
    .skill {
        width: 100%;
        padding: 24px 0 0;
        position: relative;
        margin: 0 auto;
    }

    .skill a.on {
        color: #c80;
        background: rgba(204, 136, 0, .1);
    }

    .skill a {
        float: left;
        margin-right: 20px;
        padding: 0 12px;
        font-size: 14px;
        color: #4d555d;
        line-height: 32px;
        border-radius: 6px;
        margin-bottom: 12px;
    }

    .skill a:hover {
        background: #d9dde1;
    }
</style>

